<template>
    <button @click="goBack">后退</button>
    <h4>白蛇传.断桥,具体详情</h4>
    <table class="table table-striped table-hover table-bordered">
        <thead>
            <tr>
                <th scope="col">序号</th>
                <th scope="col">商品名称</th>
                <th scope="col">图片</th>
                <th scope="col">分类</th>
                <th scope="col">销量</th>
                <th scope="col">操作</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="item in list" :key="item.id">
                <td>{{ item.id }}</td>
                <td>{{ item.subject }}</td>
                <td><img :src="item.img" alt="item.subject" /></td>
                <td>{{ item.content }}</td>
                <td>{{ item.place }}</td>
                <td>
                    <a href="javascript:;" @click="remove(item.id, item.status)">购买</a>
                </td>
            </tr>
        </tbody>
    </table>
</template>

<script setup>
import { useRouter } from 'vue-router';
import { ref } from 'vue'
const list = ref([
    {
        id: 1,
        subject: '京剧脸谱盖碗',
        content: '陶瓷',
        place: '1000+',
        status: false,
        img: '/1.png'
    },
    {
        id: 2,
        subject: '京剧风发钗发梳',
        content: '文创',
        place: '3000+',
        status: false,
        img: '/5.png'
    },
    {
        id: 3,
        subject: '精致胸针',
        content: '文创',
        place: '1000+',
        status: false,
        img: '/2.png'
    },
])
const router = useRouter()
const goBack = () => {
    router.back()
}
</script>

<style lang="less" scoped>
.col-auto {
    width: 500px;
}

.input-group {
    width: 300px;
    display: flex;

    .input-group {
        font-size: 20px;
        line-height: 25px;
    }
}

.table {
    width: 800px;
    height: 500px;
    border: 1px;
    text-align: center;
}
</style>